<template>
    
    <div id="sellCharts" style="width: 100%; height: 100%"></div>
  
  
  </template>
  
  <script setup>
  import {onMounted, reactive, ref} from "vue";
  import { request } from '../utils/request'
  import * as echarts from "echarts";
  //声明表单数据
  const yearForm=reactive({
    year:''
  });
  //声明选项集合
  const yearList=ref([]);
  //定义发送请求，加载年份数据

  //页面加载调用函数
  onMounted(function(){
    queryLogListStats();
  });
  //下拉列表框选择内容发生变化的回调函数
  function queryLogListStats(year){
    console.log(year);
    //发生请求加载数据
    request({ url: `http://localhost:8081/queryLogListStats`, method: 'get' })
        .then((response)=>{
       console.log(JSON.stringify(response));
          var sellDom = document.getElementById('sellCharts');
          var sellChart = echarts.init(sellDom);
          var option = {
            xAxis: {
              type: 'category',
              data: response.data.xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: response.data.ydata,
                type: 'line',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)'
                }
              }
            ]
          };
          option && sellChart.setOption(option);
        })
        .catch((error)=>{})
  }
  </script>
  
  <style scoped>
  
  </style>